import { useEffect, useState } from 'react'
import { ConfigProvider } from 'react-vant';
import NavBar from './components/NavBar'
import Router from '@/routes'
import { useLocation } from 'react-router-dom';
import s from './style.module.less'
import cs from 'classnames'


function App() {
  const [showNav, setShowNav] = useState(false)
  const needNav = ['/', '/message', '/info', '/recommand', '/user']
  const { pathname } = useLocation()

  useEffect(() => {
    setShowNav(needNav.includes(pathname))
    // console.log(showNav);
  }, [pathname])

  return (
    <ConfigProvider>
      <div style={{
        position: 'relative',
        overflow: 'hidden'
      }}>
        <Router />
        {/* 让导航栏在底部五个路径的页面显示，其他页面则不显示 */}
        <div className={cs({ [s.hidden]: showNav == false })}>
          <NavBar />
        </div>

      </ div>

    </ConfigProvider>
  )
}

export default App
